<template>
    <!-- popper-append-to-body = false 解决收缩时，栈溢出问题 -->
    <el-submenu v-if="menu.list && menu.list.length >= 1" :index="menu.menuId + ''" :popper-append-to-body="false">
        <template slot="title">
            <i :class="'fa fa-'+ menu.icon " aria-hidden="true"></i>&nbsp;
            <span>{{ menu.name }}</span>
        </template>
        <side-bar-menu
                v-for="item in menu.list"
                :key="item.menuId"
                :menu="item">
        </side-bar-menu>
    </el-submenu>
    <el-menu-item v-else :index="menu.index" @click="gotoRouteHandle(menu)">
        <i :class="'fa fa-'+ menu.icon " aria-hidden="true"></i>&nbsp;
        <span>{{ menu.name }}</span>
    </el-menu-item>
</template>

<script>
    import sideBarMenu from './sideBarMenu'
    export default {
        name: "sideBarMenu",
        props: {
            menu: {
                type: Object,
                required: true
            },
        },
        components: {
            sideBarMenu
        },
        methods: {
            // 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
            gotoRouteHandle (menu) {
                //检测点击菜单和当前菜单一致，不执行路由跳转
                if(this.$store.state.common.menuActiveName == menu.index){
                    return;
                }

                let url = menu.url;
                if (url.length >= 1) {
                    if(/^http[s]?:\/\/.*/.test(url)){
                        let iframePath = url.replace(/^http[s]?:\/\//, '');
                        iframePath = '/'+ iframePath.substring(iframePath.lastIndexOf(":") + 1);
                        //相对路径和绝对路径问题 - 当前是相对路径，获取上次路由所在地址，进行拼接
                        this.$router.push({ path: iframePath })
                    }else{
                        this.$router.push({ path: '/'+url })
                    }

                }
            }
        }
    }
</script>

<style scoped>

</style>